<template>
  <div class="bgcolor">
    <div class="channel-list w">
      <div v-if="page.total == 0">
        <span class="serachError">
          抱歉没有找到您想要的数据，请重新搜索或者更换条件</span
        >
      </div>
      <!-- 列表数据 -->
      <div class="pro-list hide" id="j-prdlist" style="display: block">
        <ul class="clearfix" id="pro-list">
          <li v-for="(item, index) in proLists" :key="index">
            <div class="pro-panels">
              <router-link
                :to="{
                  path: '/detail',
                  query: {
                    skuid: item.skuid,
                  },
                }"
              >
                <p class="p-img">
                  <img
                    :src="`https://img11.360buyimg.com/n7/${item.imageList[0]}`"
                  />
                </p>
                <p></p>
                <p class="p-name" title="">{{ item.jixing }}</p>

                <p class="p-price">
                  <b>¥{{ item.price }}</b>
                  <span v-if="item.colorSize.length != 0">多款可选</span>
                  <span
                    v-if="item.isYuShou"
                    style="
                      border-radius: 0 0 5px 5px;
                      color: white;
                      background-color: #ff6a6e;
                      padding: 0 8px;
                      border: none;
                    "
                    >新品上市</span
                  >
                </p>

                <p class="p-comment">
                  <em
                    ><span>{{ item.comment[0].CommentCountStr }}</span
                    >人评价</em
                  ><em
                    ><span>{{ item.comment[0].GoodRateShow }}</span
                    >%好评</em
                  >
                </p>
                <p class="p-shopname">
                  <em
                    ><span>{{ item.shopname }}</span></em
                  >
                </p>
              </router-link>
            </div>
          </li>
        </ul>
      </div>

      <!-- 分页 -->
      <div class="pager" id="page">
        <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="20"
          :total="page.total"
          :hide-on-single-page="page.value"
        >
        </el-pagination>
      </div>
      <div class="hr-20"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      proLists: [],
      page: {
        total: 0,
        value: false,
      },
    };
  },
  computed: {
    condition() {
      return this.$store.state.condition;
    },
  },
  watch: {
    condition: {
      handler() {
        this.getproLists(1);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.getproLists(val);
      //回到顶部
      document.documentElement.scrollTop = 0;
    },
    getproLists(page_now) {
      let condi = this.condition;
      this.axios
        .post("/phone/queryList", {
          page_size: 20,
          page_now,
          condi,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.page.total = res.data.data.total;
            if (Math.ceil(this.page.total / 20) <= 1) {
              this.page.value = true;
            }
            this.proLists = res.data.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
@import url("../../assets/fa/css/all.css");
@import url("../../assets/css/base.css");
@import "../../assets/css/prolist.css";
</style>
